<template>
  <div class="normal-table">
    <el-table
    stripe
      @selection-change="handleSelectionChange"
      :border="!vertical"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <template v-for="(col, index) in columns">
          <el-table-column
            :key="index"
            :label="col.label"
            v-if="col.show && !vertical"
            :fixed="col.handlerList ? 'right' : false"
          >
            <template slot-scope="scope">
              <div v-if="!col.handlerList && !col.statusList">
                {{ scope.row[col.prop] }}
              </div>

              <!-- 状态栏 -->
              <div v-if="col.statusList">
                {{ scope.row[col.prop] | getStatus(col.statusList) }}
              </div>


              <!-- 操作栏 -->
              <div v-if="col.handlerList">
                <!-- <span
                  class="handler"
                  @click="handler(hand, scope.row)"
                  v-for="(hand, hIndex) in col.handlerList"
                  :key="hIndex"
                  >{{ hand.text }}</span
                > -->
                <el-button size="small" @click="handler(hand, scope.row)"
                  v-for="(hand, hIndex) in col.handlerList"
                  :key="hIndex">{{ hand.text }}</el-button>
              </div>
            </template>
          </el-table-column>

      </template>
      
      <el-table-column v-if="vertical" label="" width="300px">
        <template>
          <div v-for="(col, cindex) in columns" :key="cindex" >
            <span v-if="col.show">{{ col.label }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" v-if="vertical">
        <template slot-scope="scope">
          <div v-for="(col, index) in columns" :key="index">
              <span v-if="col.show">
                <span v-if="!col.handlerList && !col.statusList">{{
                    scope.row[col.prop]
                }}</span>

                <!-- 状态栏 -->
                <div v-if="col.statusList">
                  {{ scope.row[col.prop] | getStatus(col.statusList) }}
                </div>
                <!-- 操作栏 -->
                <span v-if="col.handlerList">
                  <!-- <span
                      class="handler"
                      @click="handler(hand, scope.row)"
                      v-for="(hand, hIndex) in col.handlerList"
                      :key="hIndex"
                      >{{ hand.text }}</span
                  > -->
                  <el-button size="small" @click="handler(hand, scope.row)"
                  v-for="(hand, hIndex) in col.handlerList"
                  :key="hIndex">{{ hand.text }}</el-button>
                </span>
              </span>
          </div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  props: ["columns", "tableData", "vertical"],
  created() {},
  data(){
      return{
      }
  },
  filters:{
    getStatus(val, list){
      return list.find(item => item.status == val).text
    },
  },
  watch:{
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit("setBatchList", val);
    },
    handler(hand, row) {
      row.handler = hand.command;
      this.$emit("handler", row);
    },
  },
};
</script>

<style lang='scss' scoped>
.normal-table {
  margin-top: 10px;
  min-height: 450px;
}
.handler {
  cursor: pointer;
  margin-right: 10px;
  &:hover {
    text-decoration-line: underline;
  }
}
</style>